<style scoped lang="less">
.rank {
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 105px);
  padding: 10px 20px;
}
</style>
<template>
  <div class="rank" ref="rankRef">
    <AuthorityList :list="authorityListCom"/>
    <WholeWorldList :list="wholeWorldListCom"/>
  </div>
  <ScrollBar :el="rankRef"></ScrollBar>
</template>

<script lang="ts" setup>
// todo 资源
import { AxiosService } from "@/core";
const axios = new AxiosService('netEasyMusic')
import ScrollBar from '@/components/scrollBar'
import AuthorityList from '../modules/rank/authorityList.vue'
import WholeWorldList from '../modules/rank/wholeWorldList.vue'
import {computed, ref} from "vue";
const rankRef = ref(null)



const listApi = ref([]) //接口数据
const authorityListCom = computed(() => (listApi.value?.filter((ele:any) => ele?.ToplistType))) // 官方榜单
const wholeWorldListCom = computed(() => (listApi.value?.filter((ele:any) => !ele?.ToplistType))) // 官方榜单
// 榜单请求
axios.get({
  api:'/toplist',
  success: ({list}) => listApi.value = list ?? []
})

</script>

